﻿function Renderer(field, wrapper) {
    this.Field = field;
    this.Wrapper = wrapper;

    //var renderGem = function(gem) {
    //    var el = document.createElement("div");

    //    el.classList.add("gem");
    //    el.classList.add("gem-" + GemColor.getKey(gem.Color).toLowerCase());

    //    return el;
    //}

    this.render = function () {
        this.Wrapper.innerHTML = "";

        var allElements = document.createDocumentFragment();

        for (var row = 0; row < this.Field.matrix.length; row++) {

            for (var col = 0; col < this.Field.matrix[row].length; col++) {
                var el = this.Field.matrix[row][col].init();
                el.id = row + "-" + col;
                allElements.appendChild(el);

            }

            allElements.appendChild(document.createElement("br"));
        }

        this.Wrapper.appendChild(allElements);
    }
}